<!--
 * @Date: 2024-10-23 16:47:43
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-10-24 11:04:14
 * @Description: 专家信息
-->
<template>
  <vxe-modal
    v-if="dialogState.visible"
    ref="dialogRef"
    :="dialogAttrs"
    v-model="dialogState.visible"
    @close="handleCancel"
  >
    <ExpertInfoPanel ref="compsRef" :="compsAttrs" />
    <template #footer>
      <el-button type="primary" @click="handleConfirm()">确定</el-button>
      <el-button @click="handleCancel()">取消</el-button>
    </template>
  </vxe-modal>
</template>

<script setup>
import { ref } from 'vue';
import ExpertInfoPanel from './panels/ExpertInfoPanel.vue'

const props = defineProps({
  // 类型
  type: { type: String, default: 'add' },
  // 弹窗名称
  title: { type: String, default: '专家注册' },
  // 是否可见
  visible: { type: Boolean, default: false },
  // 表单编码
  formCode: { type: String },
  // 弹窗类型
  compType: { type: String, default: 'expert' },
  // 额外参数
  extParams: { type: Object, default: () => ({})},
  // 是否显示底部
  showFooter: { type: Boolean, default: true },
  // 取消方法
  onCancel: { type: Function },
  // 确认方法
  onConfirm: { type: Function },
  // 销毁方法
  onDestory: { type: Function },
})

// 弹窗的Ref
const dialogRef = ref(null)
// 弹窗属性配置
const dialogAttrs = reactive({
  title: props.title,
  width: '85%',
  height: '80%',
  resize: true,
  zIndex: 1002,
  transfer: true,
  showZoom: true,
  minWidth: 460,
  minHeight: 320,
  fullscreen: false,
  showFooter: props.showFooter,
  destroyOnClose: true,
})
// 弹窗数据集
const dialogState = reactive({
  visible: props.visible
})

const compsRef = ref()
// 组件的配置信息
const compsAttrs = computed(() => {
  const result = {
    type: props.compType,
    // 表单编码
    formCode: props.formCode,
    // 按钮类型
    buttonCode: props.type,
    // 额外参数
    ...props.extParams
  }
  return result
})

const handleCancel = () => {
  if (props.onCancel) { props.onCancel() }
  handleDestory()
}
const handleConfirm = async() => {
  const { getData } = compsRef.value
  let  result = null
  if (getData) { 
    result = await getData()
    if (!result) return
  }
  if (props.onConfirm) { props.onConfirm(result) }
  handleDestory()
}
const handleDestory = () => {
  if (props.onDestory) { props.onDestory() }
}

</script>

<style lang="scss" scoped>

</style>